<template>
  <div class="home">
    <el-container>
      <el-header class="homeHeader">
        <h3>东软云医院HIS系统</h3>
        <el-dropdown @command="dropdownCallBack">
            <span class="el-dropdown-link">
            {{loginUser.realname}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="settings">个人中心</el-dropdown-item>
            <el-dropdown-item divided command="logout">注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <!--          菜单-->
          <el-menu router unique-opened>
            <!--index="" 有错 显示的是item找不到-->
            <el-submenu :index="i+''" v-for="(item,i) in routes" :key="i" >
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item :index="child.path" v-for="(child,j) in item.children" :key ='j'>
                <div slot="title" @click="addTabs(child)">{{child.name}}</div>
              </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <!--        main区域-->
        <el-main>
          <div v-if="this.$route.path=='/Home'">
            <h2>欢迎使用东软云医院系统</h2>
          </div>
          <el-breadcrumb style="margin-bottom: 10px" separator-class="el-icon-arrow-right" v-else>
            <el-breadcrumb-item :to="{ path: '/Home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{this.$route.name}}</el-breadcrumb-item>
          </el-breadcrumb>
<!--           标签页-->
          <el-tabs @tab-click="tabClick" v-model="editableTabsValue"  type="card" editable
                   @edit="handleTabsEdit">
          <el-tab-pane
                  :key="a.name"
                  v-for="(a, index) in editableTabs"
                  :label="a.name"
                  :name="a.name"
                  :path="a.path"
          >
          </el-tab-pane>
          </el-tabs>
<!--          展示位置-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>

  export default {
    name: 'Home',
    data() {
      return{
        editableTabsValue: '',
        editableTabs: [],
        //从session中获取用户登录者信息
        loginUser : JSON.parse(window.sessionStorage.getItem('loginer'))
      }
    },



    methods: {
      handleTabsEdit(targetName, action) {
        if (action === 'remove') {
          let tabs = this.editableTabs;
          let activeName = this.editableTabsValue;
          if (activeName === targetName) {
            tabs.forEach((tab, index) => {
              if (tab.name === targetName) {
                let nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                  activeName = nextTab.name;
                  this.$router.replace(nextTab.path)
                }
              }
            });
          }
          this.editableTabsValue = activeName;
          this.editableTabs = tabs.filter(tab => tab.name !== targetName);
        }
      },

      //点击标签路由跳转
      tabClick(tab){
        this.editableTabsValue=tab.name;
        this.$router.push(tab.$attrs.path)
      },

      //点击选项卡添加对象
      addTabs(child){
        let onOff=true;
        this.editableTabs.forEach((tab,i)=>{
          if (tab.name ==child.name){
            onOff=false;
          }
        })
        if (onOff){
          this.editableTabs.push(child);
        }
        this.editableTabsValue=child.name;
      },

      // Header下拉菜单回调
      dropdownCallBack(item) {
        if (item == 'logout') {
          this.$confirm('是否确认注销登录, 是否继续?', '注销', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$getRequest('/logout').then(resp => {
              if (resp) {
                // 将 session 中 loginer 删除
                window.sessionStorage.removeItem('loginer');
                // 跳转登录页
                this.$router.replace('/');
                this.$store.commit('initRoutes',[]);
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            });
          });
        }
      }
    },
    computed:{
      routes(){
        return this.$store.state.routes;
      }
    },
  }
</script>
<style scoped>
  .homeHeader{
    background: #409EFF;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .homeHeader h3{
    color: #fff;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #fff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>